<template>
  <div class="g-file-link g-flex">
    <CIcon class="g-flex-shrink-0" type="c-xian-putongwenjian"></CIcon>
    <GTooltip
      :wrap-style="{ overflow: 'hidden', height: '22px' }"
      :content="props.filename"
      v-if="props.ellipsis"
    >
      <a class="link-text g-ml4 g-ell" :href="props.url" target="__blank"> {{ props.filename }}</a>
    </GTooltip>
    <a class="link-text g-ml4" :href="props.url" target="__blank" v-else> {{ props.filename }}</a>
  </div>
</template>
<script lang="ts" setup name="GFileLink">
import { defineProps, withDefaults } from 'vue';
import { GTooltip } from '@/components/GTooltip/index';

interface GFlowDescItemProps {
  url?: string;
  filename?: string;
  // 是否一行
  ellipsis?: boolean;
}
const props = withDefaults(defineProps<GFlowDescItemProps>(), {
  ellipsis: false
});
</script>
<style lang="scss" scoped>
.g-file-link {
  width: 100%;
  height: 100%;
  .link-text {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #51596c;
    line-height: 22px;
    text-decoration: none;
    &:hover {
      color: #1d92cc;
    }
  }
}
</style>
